<template>
    <div class="app-container">
      <!--查询表单-->
    <div class="search-div">
      <el-form label-width="70px" size="small">
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色名称">
              <el-input style="width: 100%" v-model="roleQueryVo.roleName" placeholder="角色名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display:flex">
          <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
        </el-row>
      </el-form>
    </div>
    <!-- 工具条 -->
<div class="tools-div">
  <el-button type="success" icon="el-icon-plus" size="mini" :disabled="$hasBP('bnt.sysRole.add')  === false" @click="add">添 加</el-button>
  <el-button class="btn-add" size="mini" :disabled="$hasBP('bnt.sysRole.add')  === false" @click="batchRemove()" >批量删除</el-button>
</div>
      <!-- 表格 -->
    
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      style="width: 100%;margin-top: 10px;"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection"/>
      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="roleCode" label="角色编码" />
      <el-table-column prop="createTime" label="创建时间" width="160"/>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" :disabled="$hasBP('bnt.sysRole.add')  === false" @click="edit(scope.row.id)" title="修改"/>
          <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="$hasBP('bnt.sysRole.add')  === false" @click="removeDataById(scope.row.id)" title="删除"/>
          <el-button type="warning" icon="el-icon-baseball" size="mini" :disabled="$hasBP('bnt.sysRole.add')  === false" @click="showAssignAuth(scope.row)" title="分配权限"/>
          
        </template>
      </el-table-column>
    </el-table>
      <!-- 分页组件 -->
  <el-pagination
    :current-page="page"
    :total="total"
    :page-size="limit"
    style="padding: 30px 0; text-align: center;"
    layout="total, prev, pager, next, jumper"
    @current-change="fetchData"
  />
<!--编辑表单-->
          <el-dialog title="编辑" :visible.sync="dialogVisible">
            <el-form :model="SysRole">
              <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="SysRole.roleName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="角色编码" :label-width="formLabelWidth">
                <el-input v-model="SysRole.roleCode" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="SysRole.description" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="editUpdata(SysRole)">确 定</el-button>
            </div>
          </el-dialog>
<!--添加表单-->
          <el-dialog title="添加" :visible.sync="AddVisible">
            <el-form :model="SysRole">
              <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="SysRole.roleName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="角色编码" :label-width="formLabelWidth">
                <el-input v-model="SysRole.roleCode" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="SysRole.description" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="AddVisible = false">取 消</el-button>
              <el-button type="primary" @click="AddSysRole(SysRole)">确 定</el-button>
            </div>
          </el-dialog>
    </div>
  </template>
  <style>
  .search-div {
      padding:10px;border: 1px solid #EBEEF5;border-radius:3px;
  }
  .tools-div {
      margin-top: 10px;padding:10px;border: 1px solid #EBEEF5;border-radius:3px;
  }
</style>
  <script>
  import api from '@/api/system/role'
  export default {
    //定义初始值
    data(){
      return {
        listLoading:true,
        list:[],  //角色列表
        total:0,  //总记录数
        page:1,   //当前页
        limit:10,  //每页显示记录数
        roleQueryVo:{},  //条件查询封装对象

        dialogVisible: false,
        AddVisible: false,
        SysRole: {
          id:'',
          roleName: '',
          roleCode: '',
          description: '',
          isdeleted: 0,
        },
        formLabelWidth: '120px',
        multipleSelection: []// 批量删除选中的记录列表


      }
    },
    //钩子函数，在页面初始化前进行，一般用来查询全部数据
    mounted(){
      //调用查询全部方法
      this.fetchData()
    },
    methods:{  //具体的方法
      //清空表单
      resetData(){
        this.roleQueryVo={};
        this.fetchData();
      },
      //列表
      fetchData(pageNum = 1) {  //传入参数设置默认值为1
        this.page=pageNum //赋值
        //调用import的api发送ajax请求
        api.getPageList(this.page,this.limit,this.roleQueryVo).then(resp => {
          this.listLoading = false;
          this.list=resp.data.records;
          this.total = resp.data.total;
          // this.page = resp.data.pages;
          // this.limit = resp.data.size;

        })
        
      },
      //删除功能
      removeDataById(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.DeleteRole(id).then(resp => {
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData()
        })

        })
      },
      //编辑功能-数据回显
      edit(id){
        api.SelectByID(id).then(resp => {
          this.SysRole.id = resp.data.id;
          this.SysRole.roleName = resp.data.roleName;
          this.SysRole.roleCode = resp.data.roleCode;
          this.SysRole.description = resp.data.description;
        })
        this.dialogVisible = true
      },
      //编辑功能-updata
      editUpdata(SysRole) {
        api.Updata(SysRole).then(resp => {
          this.$message({
            type: 'success',
            message: '修改成功！!'
          });
          this.dialogVisible = false
          this.fetchData();
        })
      },
      //添加功能
      add(){
        //清空表单
        this.SysRole={}
        this.AddVisible=true

      },
      AddSysRole(SysRole){
        api.Add(SysRole).then(resp => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.AddVisible = false
          this.fetchData();
        })
      },
      //批量删除
      // 当多选选项发生变化的时候调用
      handleSelectionChange(selection) {
        console.log(selection)
        this.multipleSelection = selection
      },
      batchRemove(){
        if (this.multipleSelection.length === 0) {
          this.$message.warning('请选择要删除的记录！')
          return
        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var idList = []
          this.multipleSelection.forEach(item => {
            idList.push(item.id)
          })
          // 调用api
            return api.DeleteByIds(idList)
          }).then((response) => {
            this.fetchData()
            this.$message.success(response.message)
          })

      },
      //分配权限
      showAssignAuth(row) {
        this.$router.push('/system/assignAuth?id='+row.id+'&roleName='+row.roleName);
      },



    }
  }
  </script>